<template>
  <el-tabs v-model="tabIndex">
<!--    <el-tab-pane label="页面配置" name="setting">-->
<!--      <div class="tbc-flex-row" style="flex-wrap: wrap;margin-top:20px">-->
<!--        <div style="background: #F5F5f5;margin:5px 20px 5px 0;padding:10px;width: 100px;"-->
<!--             @click="showSetting(item)"-->
<!--             class="component" v-for="(item, index) in setting" :key="index">-->
<!--          <p style="font-size: 12px;text-align: center">{{ item.label }}</p>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-tab-pane>-->
    <el-tab-pane label="基础组件" name="base">
      <div class="tbc-flex-row" style="flex-wrap: wrap;margin-top:20px">
        <div style="background: #F5F5f5;margin:5px 20px 5px 0;padding:10px;width: 100px;" @click="addComponent(item)"
             class="component" v-for="(item, index) in components" :key="index">
          <p style="font-size: 12px;text-align: center">{{ item.label }}</p>
        </div>
      </div>
    </el-tab-pane>

    <el-tab-pane label="业务组件" name="business">
      <div class="tbc-flex-row" style="flex-wrap: wrap;margin-top:20px">

      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import designBuilder from '../utils/designBuilder'
import background from './config/background'
import blank from './config/blank'
import imageGroup from './config/image'
import carousel from './config/carousel'
import menu from './config/menu'
import search from './config/search'
import keyword from './config/keyword'

export default defineComponent({

  setup(props, {emit}) {
    const state = reactive({
      tabIndex: 'base',
      setting: {background},
      components: {
        blank, 'image-group': imageGroup, carousel, menu, search, keyword
      }
    })

    // 创建组件
    const create = (component) => {
      let module = JSON.parse(JSON.stringify(state.components[component.type]))
      module.id = designBuilder.uuid()
      module.data = component.data
      module.setting.forEach(item => {
        let config = component.config
        if (typeof config[item.name] !== 'undefined') {
          item.form.forEach(form => {
            if (typeof config[item.name][form.field] !== 'undefined') {
              form.value = config[item.name][form.field]
            }
          })
        }
      })
      return module
    }

    // 添加组件
    const addComponent = (item) => {
      let module = JSON.parse(JSON.stringify(item))
      module.id = (new Date()).getTime()
      console.log(module)
      emit('add', module)
    }

    return {
      ...toRefs(state),
      addComponent,
      create
    }
  },


  // methods: {
  //
  //
  //   getSetting(data) {
  //     let setting = this.setting
  //     setting.background.setting.forEach(item => {
  //       item.form.forEach(form => {
  //         if (typeof data[item.name][form.field] !== 'undefined') {
  //           form.value = data[item.name][form.field]
  //         }
  //       })
  //     })
  //     return setting
  //   },
  //
  //
  //   add(item) {
  //     let module = JSON.parse(JSON.stringify(item))
  //     module.id = this.generateUUID()
  //     this.$emit('add', module)
  //   },
  //
  //   showSetting(item) {
  //     let module = item
  //     module.id = this.generateUUID()
  //     this.$emit('setting', module)
  //   }
  // }
})
</script>
<style scoped>
.component:hover {
  cursor: pointer
}
</style>